<template>
	<view class="">
		<swiper class="swiper swip-img" :circular="true" :indicator-dots='true' :autoplay="true" :interval="3000" :duration="500">
			<swiper-item>
				<image src="../../static/images/hehadj.jpg" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/images/bannergy.jpg" mode="" ></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/images/hohlejd.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="line-content">
			<view class="Price-cendiv">
				<view class="Price-span">
					<text class="Price-Symbol">￥</text>
					<text class="Price-numb">{{title.money}}</text>
					<text class="Price-one">起/人</text>
				</view>
				<view class="date-tetili">{{title.title}}</view>
				<view class="start-price">
					<view class="Collection-xl">销量{{title.sales}}</view>
					<view class="Collection-pj">评价{{title.evaluate}}</view>
					<view class="Collection-sc" @click="iosanzbd">
						<view>收藏</view>
						<text class="iconfont icon-shoucang" :class="{blue:!iosanz,reds:iosanz}"></text>
						<!-- :class="{colour: !clibs,gray: clibs}" @click="clibs=!clibs" -->
					</view>
				</view>
				<view class="Comfortable-div">
					<view class="Comfortable">
						<image src="../../static/images/duide.png"/></image>
						<view>舒适游</view>
					</view>
					<view class="Comfortable">
						<image src="../../static/images/duide.png"/></image>
						<view>无购物</view>
					</view>
					<view class="Comfortable">
						<image src="../../static/images/duide.png"/></image>
						<view>精选酒店</view>
					</view>
					<view class="Comfortable">
						<image src="../../static/images/duide.png"/></image>
						<view>特色美食</view>
					</view>
				</view>
			</view>
			<view class="Choose-date" @click="calenrq">
				<view class="Choose-dateView">出行日期</view>
				<view class="Choicedate">
					<view>{{date_cont}}</view>
					<text class="iconfont icon-icon"></text>
				</view>
			</view>
			
			<view class="Scenic-ticket">
				<view class="Scenic-spot">
					<!-- <image src="../../static/images/yhqo.png"/></image> -->
					<view>套餐类型</view>
				</view>
				<view>
					<view class="Reserve-list">
						<view class="Series-text">
							<view class="Series-titeli">{{setmeal.one}}</view>
							<view>
								<text class="ticket-Price">￥</text>
								<text class="ticket-nmuber">{{setmeal.onemoney}}</text>
							</view>
						</view>
						<view class="Reserve-Price">
							<view class="any-div">
								<text class="any-time">{{setmeal.tap}}</text>
								<text class="any-sold">已售{{setmeal.onealready}}</text>
							</view>
							<input type="button" value="预定" class="Reserve-yd" disabled="disabled" @click="reserve"/>
							<!-- <button class="Reserve-yd">预定</button> -->
						</view>
					</view>
					<view class="Reserve-list">
						<view class="Series-text">
							<view class="Series-titeli">{{setmeal.two}}</view>
							<view>
								<text class="ticket-Price">￥</text>
								<text class="ticket-nmuber">{{setmeal.twomoney}}</text>
							</view>
						</view>
						<view class="Reserve-Price">
							<view class="any-div">
								<text class="any-time">{{setmeal.tap}}</text>
								<text class="any-sold">已售{{setmeal.twoalready}}</text>
							</view>
							<input type="button" value="预定" class="Reserve-yd" disabled="disabled" @click="reserve"/>
							<!-- <button class="Reserve-yd">预定</button> -->
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="visit">
				<view class="place-div">
					<view class="city-ing">
						<image src="../../static/images/city.png"/></image>
						<view>出发地点</view>
					</view>
					<view class="place">{{mation.position}}</view>
				</view>
				<view class="place-div">
					<view class="city-ing">
						<image src="../../static/images/sunrise.png"/></image>
						<view>出游天数</view>
					</view>
					<view class="place">{{mation.day}}</view>
				</view>
				<view class="place-div">
					<view class="city-ing">
						<image src="../../static/images/travel.png"/></image>
						<view>游览城市</view>
					</view>
					<view class="place">{{mation.place}}</view>
				</view>
				<view class="place-div">
					<view class="city-ing">
						<image src="../../static/images/odation.png"/></image>
						<view>住宿标准</view>
					</view>
					<view class="place">{{mation.dation}}</view>
				</view>
			</view>
			<view class="evaluate">
				<view class="household-dpzh">
					<view class="household">评价</view>
					<view class="Comment" id="mentdp" @click="evaclick">{{evaluate.many}}条评价 ></view>
				</view>
				<view>
					<view class="hold-xitta">
						<view class="name-header">
							<image :src="evaluate.img" class="header-img"/></image>
							<view class="name-detaid">
								<view>{{evaluate.name}}</view>
								<text>{{evaluate.date}}</text>
							</view>
						</view>
						<view class="household-xits">
							<image :src="evaluate.xingimg"/></image>
							<image :src="evaluate.xingimg"/></image>
							<image :src="evaluate.xingimg"/></image>
							<image :src="evaluate.xingimg"/></image>
							<image :src="evaluate.xtwoimg"/></image>
						</view>
					</view>
					<text class="evaluate-nr">{{evaluate.centen}}</text>
					<view class="hohl-aimg">
						<image :src="evaluate.centimg"/></image>
						<image :src="evaluate.centimg"/></image>
						<image :src="evaluate.centimg"/></image>
					</view>
				</view>
			</view>
			
			<!--线路详情-->
			<view v-for="(daye,index) in daylist" :key="index">
				<view class="Trip-date">
					<view class="First-day">
						<image :src="daye.headimg"/></image>
						<view>{{daye.day}}</view>
					</view>
					<view class="insect-km">{{daye.place}}</view>
					<view class="aggregate-div">
						<view class="aggregate">
							<image :src="daye.flagimg"/></image>
							<view>{{daye.flag}}</view>
						</view>
						<view class="aggregate-p">
							<view>
								<view class="meal-situation">
									<view class="meal-jd">用餐情况：</view>
									<view>
										<view class="meal-jdaad">
											<text>早餐：</text>
											<text>{{daye.morning}}</text>
										</view>
										<view class="meal-jdaad">
											<text>午餐：</text>
											<text>{{daye.in}}</text>
										</view>
										<view class="meal-jdaad">
											<text>晚餐：</text>
											<text>{{daye.night}}</text>
										</view>
									</view>
								</view>
								<view class="meal-situation">
									<view class="meal-jd">住宿情况：</view>
									<view>
										<view class="meal-jdaad">
											{{daye.dation}}
										</view>
									</view>
								</view>
								<view class="meal-situation">
									<view class="meal-jd">交通工具：</view>
									<view>
										<view class="meal-jdaad">
											{{daye.traffic}}
										</view>
									</view>
								</view>
							</view>
							<view class="gate-p">
								<view>{{daye.centenone}}</view>
								<view>{{daye.cententwo}}</view>
							</view>
							<view class="Explain">说明：出团时间、地点仅供参考，具体以出团通知为准。</view>
						</view>
					</view>
					<view class="aggregate-div">
						<view class="aggregate">
							<image :src="daye.hotelimg"/></image>
							<view>{{daye.hotel}}</view>
						</view>
						<view class="aggregate-p">
							<view class="gate-p">
								<image :src="daye.hotelcenimg"/></image>
								<image :src="daye.hotelcenimg"/></image>
								<image :src="daye.hotelcenimg"/></image>
								<image :src="daye.hotelcenimg"/></image>
							</view>
							<view class="Explain">说明：出团时间、地点仅供参考，具体以出团通知为准。</view>
						</view>
					</view>
					<view class="aggregate-div">
						<view class="aggregate">
							<image :src="daye.spotimg"/></image>
							<view>{{daye.spot}}</view>
						</view>
						<view class="aggregate-p">
							<view class="gate-p">
								<image :src="daye.spocentetimg"/></iamge>
								<image :src="daye.spocentetimg"/></iamge>
								<image :src="daye.spocentetimg"/></iamge>
								<image :src="daye.spocentetimg"/></iamge>
							</view>
							<view class="Explain">说明：出团时间、地点仅供参考，具体以出团通知为准。</view>
						</view>
					</view>
					<view class="aggregate-div">
						<view class="aggregate">
							<image src="../../static/images/lunch.png"/></iamge>
							<view>早餐/午餐/晚餐：{{daye.meal}}</view>
						</view>
						<view class="aggregate-p">
						</view>
					</view>
					<view class="aggregate-div">
						<view class="aggregate">
							<image :src="daye.tripimg"/></iamge>
							<view>{{daye.trip}}</view>
						</view>
						<view class="aggregate-p">
							<view class="gate-p">
								<view>{{daye.tripcent}}</view>
							</view>
						</view>
					</view>
					<view class="aggregate-div">
						<view class="aggregate">
							<image :src="daye.otherimg"/></iamge>
							<view>{{daye.other}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!--图文详情-->
			<view class="Image-text">
				<view>图文详情</view>
				<image src="../../static/images/hehadj.jpg"/></image>
				<image src="../../static/images/jiaxl.jpg"/></image>
			</view>
			
			<!-- 列表 -->
			<view>
				<view class="gy-titele">
					为您推荐
				</view>
				<view class="line-ul">
					<view class="line-list" @click="jumldateils" v-for="(textem,index) in meal" :key="index">
						<image :src="textem.img" class="jiaxl-img"/></image>
						<view class="Price-bt">
							<text>{{textem.telet}}</text>
							<view class="Trip-jt">
								<view class="Praise-lv">{{textem.out}}</view>
								<view class="Trip-dd">销量：{{textem.volume}}</view>
							</view>
							<view class="Trip-jt">
								<view class="Praise-stly">{{textem.days}}</view>
								<view class="Trip-dd">好评率{{textem.praise}}</view>
							</view>
							<view class="Price-jg">
								<view><span class="Price-jg-span">￥</span><span>{{textem.money}}</span></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				iosanz: true,
				date_cont:'请选择',
				daylist:[
					{
						headimg:'../../static/images/head-one.png',
						day:'第一天',
						place:'昆明',
						flagimg:'../../static/images/aggregate.png',
						flag:'集合信息',
						morning:'酒店含餐',
						in:'不含',
						night:'酒店含餐',
						dation:'海峡阳光大酒店',
						traffic:'轮船',
						centenone:'1、交通：全程正规空调旅游车，每人一个正座，确保车况良好，干净卫生，司机服务态度好。',
						cententwo:'2、住宿：含2晚住宿24小时空调、热水！单房差（若产生单男单女或自然单间我社有权安排三人间，或客人自付单房差）（九寨沟提倡绿色环保，酒店都不提供一次性洗漱用品，请游客自备；如游客不用房，房费不退）',
						hotelimg:'../../static/images/odation.png',
						hotel:'入住酒店',
						hotelcenimg:'../../static/images/hehadj.jpg',
						spotimg:'../../static/images/travel.png',
						spot:'旅游景点',
						spocentetimg:'../../static/images/jiaxl.jpg',
						meal:'自理',
						trip:'行程介绍',
						tripimg:'../../static/images/other.png',
						tripcent:'1、交通：全程正规空调旅游车，每人一个正座，确保车况良好，干净卫生，司机服务态度好。',
						otherimg:'../../static/images/travel.png',
						other:'其它'
					}
				],
				evaluate:{
					many:'1432',
					img:'../../static/images/header-t.jpg',
					name:'这是我小名',
					date:'2019-8-26',
					xingimg:'../../static/images/xits2.png',
					xtwoimg:'../../static/images/xits1.png',
					centen:'观云旅业海峡阳光大酒店（林城西路店）观云旅业海峡阳光大酒店（林城西路店）观云旅业海峡阳光大酒店（林城西路店）观云旅业海峡阳光大酒店（林城西路店）',
					centimg:'../../static/images/hohlejd.jpg'
				},
				mation:{
					position:'贵阳',
					day:'三天两晚',
					place:'三亚、陵水',
					dation:'3晚高档型住宿，1晚豪华型住宿3晚高档型住宿，1晚豪华型住宿'
				},
				title:{
					money:"1999",
					title:"九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游",
					sales:"9872",
					evaluate:"2341"
				},
				setmeal:{
					one:"门票+游船+水洞+旱洞+往返观光车+溜索",
					onemoney:"75",
					onealready:"38",
					two:"门票+游船+水洞+旱洞+往返观光车+溜索",
					twomoney:"85",
					twoalready:"28",
					tap:"随订随用"
				},
				meal:[
					{
						img:'../../static/images/jiaxl.jpg',
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游',
						out:'贵阳出发',
						volume:'999+',
						days:'三天两夜',
						praise:'90%',
						money:'1880.00'
					},
					{
						img:'../../static/images/hehadj.jpg',
						telet:'九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游',
						out:'贵阳出发',
						volume:'999+',
						days:'三天两夜',
						praise:'90%',
						money:'1880.00'
					}
				]
            }
			
		},
		onShow(options){
			let celenData = uni.getStorageSync("current_date");
			this.date_cont = celenData.date.month+'月'+celenData.date.day+'日'
			// console.log(celenData)
		},
		methods:{
			iosanzbd(){
				this.iosanz =! this.iosanz
				if(this.iosanz==false){
					console.log(123)
					uni.showToast({
						title: '添加收藏成功',
						duration: 2000
					});
				}else{
					console.log(234)
				}
			},
			calenrq:function(){
				uni.navigateTo({
					url:'line-calendar'
				})
			},
			reserve:function(){
				uni.navigateTo({
					url:'line-reserve'
				})
			},
			evaclick(){
				uni.navigateTo({
					url:'line-evaluate'
				})
			}
			
		},
		
		
	}
</script>

<style>
	@import "../../components/line/line-dateils";
	@import "../../common/iconfont.css";
	@font-face {
	       font-family: 'iconfont';
		    src: url('~@/static/iconfont.ttf');
	}
	
</style>
